<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>txt_move</title>
    <style>


        #huan_chong_move {
            height: 50px;
            width: 500px;
            border: 1px solid darkslategrey;
            position: absolute;
            left: -450px;
        }

        #huan_chong_move p {
            text-align: center;
        }

        /*缓冲*/
        #toumingdu_move {
            height: 280px;
            width: 400px;
            border: 1px solid darkslategrey;
            float: right;
        }

        #toumingdu_move li {
            height: 80px;
            width: 80px;
            list-style-type: none;
            float: right;
            margin-right: 35px;
            margin-top: 80px;
            background-color: #0d5353;
            opacity: 0.3;

        }

        /*透明度*/
        #duo_move {
            height: 200px;
            width: 500px;
            border: 1px solid darkslategrey;
            position: relative;
            top: 80px;
        }

        #duo_move li {
            height: 50px;
            width: 200px;
            list-style-type: none;
            margin-left: -40px;
            margin-bottom: 10px;
            background-color: #0d5353;
            text-align: center;
            line-height: 50px;
            opacity: 0.3;
        }

        #star_move {
            width: 100px;
            height: 100px;
            position: relative;
            top: 100px;
            border: 2px solid black;
            background-color: #663333;
            margin: 0 auto;
            opacity: 0.3;
        }

        /*多物体*/
        #star_move_1 {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            position: relative;
            top: 120px;
            background-color: #663333;
            margin: 0 auto;
            opacity: 0.3;
        }
    </style>
</head>
<body>
<div id="huan_chong_move">
    <p>缓冲动画</p>
</div>
<div id="toumingdu_move">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div id="duo_move">
    <ul>
        <li>多物体动画1</li>
        <li>多物体动画2</li>
        <li>多物体动画3</li>
    </ul>
</div>
<div id="star_move">点击测试getStyl函数</div>
<div id="star_move_1"></div>
<script>
    window.onload = function () {
        var huan_chong_move = document.getElementById('huan_chong_move');
        var duo_move = document.getElementById('duo_move');
        var duo_move_li = duo_move.getElementsByTagName('li');
        var toumingdu_move = document.getElementById('toumingdu_move');
        var toumingdu_move_li = toumingdu_move.getElementsByTagName('li');
        var star_move = document.getElementById('star_move');
        var star_move_1 = document.getElementById('star_move_1');
        var huanchong_timer = null;//缓冲定时器
        var toumingdu_speed = 0;//透明度变化速度
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                //alert(obj.currentStyle[attr]);
                return obj.currentStyle[attr];
            }
            else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        //获取html未加载样式时的容器样式；注意不同样式加载顺序生效顺序

        star_move.onclick = function () {
            var star_move_width = getStyle(star_move, 'width');
            alert('未加载CSS样式时的宽度:' + star_move_width);
            alert('加载CSS样式后宽度' + star_move.offsetWidth);
        };
        //getStyle函数测试


        function huanchong_move(huanchong_juli) {
            clearInterval(huanchong_timer);
            huanchong_timer = setInterval(
                    function () {
                        var sudu = (huanchong_juli - huan_chong_move.offsetLeft) / 10;
                        if (sudu > 0) {
                            sudu = Math.ceil(sudu);
                        }
                        else {
                            sudu = Math.floor(sudu);
                        }
                        if (huan_chong_move.offsetLeft == huanchong_juli) {
                            clearInterval(huanchong_timer);
                        }
                        else {
                            huan_chong_move.style.left = huan_chong_move.offsetLeft + sudu + 'px';
                        }
                    }
                    , 20);
        }

        huan_chong_move.onmouseover = function () {
            //huanchong_move(10);
            duo_move_star(huan_chong_move,{left:10});
        };
        huan_chong_move.onmouseout = function () {
            //huanchong_move(-450);
            duo_move_star(huan_chong_move,{left:-450});
        };
        //缓冲

        for (var y = 0; y < toumingdu_move_li.length; y++) {
            toumingdu_move_li[y].toumingdu_numb = 30;
            toumingdu_move_li[y].onmouseover = function () {
                toumingdu_move_star(this, 100);
            };
            toumingdu_move_li[y].onmouseout = function () {
                toumingdu_move_star(this, 30);
            }
        }
        function toumingdu_move_star(toumingdu_obj, toumingdu_target) {
            clearInterval(toumingdu_obj.toumingdu_timer);
            toumingdu_obj.toumingdu_timer = setInterval(
                    function () {
                        if (toumingdu_obj.toumingdu_numb < toumingdu_target) {
                            toumingdu_speed = 2;
                        }
                        else {
                            toumingdu_speed = -2;
                        }
                        if (toumingdu_obj.toumingdu_numb == toumingdu_target) {
                            clearInterval(toumingdu_obj.toumingdu_timer);
                        }
                        else {
                            toumingdu_obj.toumingdu_numb = toumingdu_obj.toumingdu_numb + toumingdu_speed;
                            toumingdu_obj.style.opacity = toumingdu_obj.toumingdu_numb / 100;
                        }
                    }, 30);
        }

        //多物体——透明度变化

        for (var i = 0; i < duo_move_li.length; i++) {
            duo_move_li[i].onmouseover = function () {
                var duo_this = this;
                duo_move_star(duo_this, {width: 500}, function () {
                    duo_move_star(duo_this, {height: 60}, function () {
                        duo_move_star(duo_this, {opacity: 100})
                    });
                });
            };
            duo_move_li[i].onmouseout = function () {
                var duo_this = this;
                duo_move_star(duo_this, {opacity: 30}, function () {
                    duo_move_star(duo_this, {height: 50}, function () {
                        duo_move_star(duo_this, {width: 200})
                    });
                });
            };
        }
//多物体链式运动


        star_move_1.onmouseover = function () {
            duo_move_star(star_move_1, {width: 200}, function () {
                duo_move_star(star_move_1, {height: 200}, function () {
                    duo_move_star(star_move_1, {opacity: 100})
                })
            });
        };
        //链式运动
        star_move_1.onmouseout = function () {
            duo_move_star(star_move_1, {opacity: 30}, function () {
                duo_move_star(star_move_1, {height: 100}, function () {
                    duo_move_star(star_move_1, {width: 100})
                })
            });
        };
        //链式运动

        star_move.onmousemove = function () {
            duo_move_star(star_move, {width: 200, height: 200, opacity: 100})
        };
        //同时运动
        star_move.onmouseout = function () {
            duo_move_star(star_move, {width: 100, height: 100, opacity: 30});
        };
        //同时运动
        function duo_move_star(duo_obj, json, fn) {
            clearInterval(duo_obj.duo_timer);
            duo_obj.duo_timer = setInterval(function () {
                var flag = true;//标志所有运动是否到达目标值
                for (var attr_j in json) {
                    var icur = 0;
                    if (attr_j == 'opacity') {
                        icur = Math.round(parseFloat(getStyle(duo_obj, attr_j)) * 100);
                    }
                    else {
                        icur = parseInt(getStyle(duo_obj, attr_j));
                    }
                    var speed = (json[attr_j] - icur) / 10;
                    if (speed > 0) {
                        speed = Math.ceil(speed);
                    }
                    else {
                        speed = Math.floor(speed);
                    }
                    if (json[attr_j] != icur) {
                        flag = false;
                    }
                    if (attr_j == 'opacity') {
                        duo_obj.style.opacity = (icur + speed) / 100;
                    }
                    else {
                        duo_obj.style[attr_j] = icur + speed + 'px';
                    }
                }
                if (flag == true) {
                    clearInterval(duo_obj.duo_timer);
                    if (fn) {
                        fn();
                    }
                }
            }, 30);
        }
    }
</script>
</body>
</html>